<script setup lang="ts">
import { onMounted } from "vue";
import { Graph } from "@antv/g6";

onMounted(() => {
  const graph = new Graph({
    container: document.getElementById("container") as HTMLElement,
    width: 1000,
    height: 1000,
    autoFit:'center',
    autoResize: true,
    theme: 'dark',
    data: {
      nodes: [
        {
          id: "node-1",
          style: { x: 50, y: 100 },
        },
        {
          id: "node-2",
          style: { x: 200, y: 100 },
        },
        {
          id: "node-3",
          style: { x: 350, y: 400 },
        },
      ],
      edges: [
        { id: "edge-1", source: "node-1", target: "node-2" },
        { id: "edge-2", source: "node-2", target: "node-3" },
      ],
    },
  });

  graph.render();
});
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
